import {Navigate, Outlet, useRoutes} from "react-router-dom";
import React, {CSSProperties, Suspense} from "react";
import {RouteObject} from "react-router/dist/lib/context";
import SuspenseLoading from "../componets/SuspenseLoading";

const Login = React.lazy(() => import("../views/Login/index"));
const Friends = React.lazy(() => import("../views/Friends/index"));
const Layout = React.lazy(() => import("../Layout/index"));
const Group = React.lazy(() => import("../views/Group/index"));
const Message = React.lazy(() => import('../views/Message/index'));
const EmptyComponent = () => {
    const style: CSSProperties = {
        margin: "30px",
        textAlign: 'center'
    }
    return (
        <h1 style={style}>页面路径不存在</h1>
    )
}

const mainStyle = {
    width: "49%",
    margin: '0 auto'
}
const SuspenseComponent = () => {
    return (
        <Suspense fallback={<SuspenseLoading/>}>
            <Outlet/>
        </Suspense>
    )
}
const Father = () => {
    return (
        <>
            <Layout/>
            <main style={mainStyle}>
                <SuspenseComponent/>
            </main>
        </>
    )
}

const Routers = () => {
    const routes: RouteObject[] = [
        {
            path: "/",
            element: <Navigate to="/login" replace/>
        },
        {
            path: "/login",
            element: <SuspenseComponent/>,
            children: [
                {
                    path: "",
                    element: <Login/>
                }
            ]
        },
        {
            path: "/",
            element: <Father/>,
            children: [
                {
                    path: "/friends",
                    element: <Friends/>,
                },
                {
                    path: "/group",
                    element: <Group/>,
                },
                {
                    path: "/message",
                    element: <Message/>,
                },
            ]
        },
        {
            path: '*',
            element: <EmptyComponent/>
        }
    ];
    return useRoutes(routes);
}
export default Routers
